<template>
    <div class="my-progressBar">
        <div class="title">
            <div class="title-left">
                <img alt="" src="/img/slices/logo.png"/>
                <div style="font-size: 16px; font-weight: bold;color: #DFEEF3;">{{ form.title }}</div>
            </div>
            <div class="title-right">
                {{ form.sum_num }}
                <span>次</span>
            </div>
        </div>
        <div class="main">
            <div class="content">
                <div class="content-left">
                    <div class="content-left-main">
                        <div class="content-left-top">已完成</div>
                        <div class="content-left-bottom">
                            <div>{{ form.over_scale }}&nbsp;<span>%</span></div>
                            <el-divider direction="vertical"></el-divider>
                            <div>{{ form.over_num }}&nbsp;<span>次</span></div>
                        </div>
                    </div>

                </div>
                <div class="content-right">
                    <div class="content-right-main">
                        <div class="content-right-top">未完成</div>
                        <div class="content-right-bottom">
                            <div>{{ form.no_over_scale }}&nbsp;<span>%</span></div>
                            <el-divider direction="vertical"></el-divider>
                            <div>{{ form.no_over_num }}&nbsp;<span>次</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div ref="chart" class="chart"></div>
        </div>
    </div>
</template>

<script>


import {heightConfig3, set_option_progress_bar_not_title} from "@/utils/loadPage";
import debounce from 'lodash/debounce';
import * as echarts from 'echarts'


// 进度条
export default {
    name: "MyProgressBar",
    data() {
        return {
            max_height: heightConfig3(),
            // 遮罩层
            loading: false,
            // 创建防抖函数
            debouncedSetOption: debounce(this.set_option, 50),
            cards: [],
            itemData: null,
            form: {
                title: '主动关怀',
                left_title: '已完成 60% | 300 个', // 左标题
                right_title: '未完成 40% | 200 个', // 右标题
                sum_num: 500, //  总数
                over_scale: 60, // 已完成百分比
                over_num: 300, // 已完成数量
                no_over_scale: 40, // 未完成百分比
                no_over_num: 200, // 未完成数量
                backgroundColor: 'rgba(6, 30, 93, 0.5)', // 背景颜色
                max: 300, // 最大值
                noDataColor: '#20455f', // 无数据时颜色
                color: '#6cd3b1', // 进度条颜色
                borderColor: '#4c9dd6', // 进度条边框颜色
                dataList: []
            },
        };
    },
    mounted() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        this.handleResize();
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 10000)

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },
    methods: {
        // 处理窗口大小变化事件
        handleResize() {
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.set_option();
        },

        set_option() {
            if (this.myChart) {
                this.myChart.dispose(); // 销毁 ECharts 实例
            }
            this.myChart = echarts.init(this.$refs.chart)
            console.log(this.form)
            let option = set_option_progress_bar_not_title(this, this.form)
            this.myChart.setOption(option)
        },

        /** 查询数据**/
        get_data() {
            this.form.dataList = [{
                value: 200,
            }];
        },
    }
};
</script>


<style scoped lang="scss">
.my-progressBar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    //border: #f22477 solid 1px;

    .title {
        flex: 1;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-left {
            flex: 1;
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 2%;

            img {
                width: 9%;
                padding-right: 2%;
            }
        }

        .title-right {
            flex: 1;
            display: flex;
            justify-content: right;
            padding-right: 2%;
            font-size: 24px;
            font-weight: bold;
            color: #37D6AF;

            span {
                display: flex;
                align-items: end;
                padding-left: 2%;
                font-size: 16px;
            }
        }


    }

    .main {
        flex: 3;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .content {
            flex: 3;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            //border: #f43908 solid 1px;

            display: flex;
            justify-content: space-evenly;
            align-items: end;

            .content-left {
                width: 40.5%;
                display: flex;
                height: 86%;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;


                background-image: url('/public/img/slices/left_top1@2x.png');
                background-size: 100% 100%; /* 背景图片覆盖整个元素 */
                background-repeat: no-repeat; /* 防止背景图片重复 */
                background-position: center center; /* 背景图片居中 */

                .content-left-main {
                    display: flex;
                    width: 80%;
                    height: 60%;
                    flex-direction: column;
                    box-sizing: border-box;
                    //border: #eabf13 solid 1px;


                    .content-left-top {
                        flex: 1;
                        box-sizing: border-box;
                        //border: #77d23e solid 1px;
                        font-size: 14px;
                        color: #FFFFFF;
                        font-weight: bold;
                    }

                    .content-left-bottom {
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        box-sizing: border-box;
                        //border: #1ab394 solid 1px;
                        font-size: 19px;
                        color: #37D6AF;
                        font-weight: bold;

                        span {
                            font-size: 14px;
                            color: #FFFFFF;
                            opacity: 0.5;
                        }

                        ::v-deep .el-divider--vertical {
                            width: 1.5%;
                            height: 60%;
                            color: #FFFFFF;
                            opacity: 0.5;
                        }

                    }
                }


            }

            .content-right {
                width: 40.5%;
                display: flex;
                height: 86%;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                //border: #77d23e solid 1px;

                background-image: url('/public/img/slices/left_top2@2x.png');
                background-size: 100% 100%; /* 背景图片覆盖整个元素 */
                background-repeat: no-repeat; /* 防止背景图片重复 */
                background-position: center center; /* 背景图片居中 */


                .content-right-main {
                    display: flex;
                    width: 80%;
                    height: 60%;
                    flex-direction: column;
                    box-sizing: border-box;
                    //border: #eabf13 solid 1px;


                    .content-right-top {
                        flex: 1;
                        box-sizing: border-box;
                        //border: #77d23e solid 1px;
                        font-size: 14px;
                        color: #FFFFFF;
                        font-weight: bold;
                    }

                    .content-right-bottom {
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        box-sizing: border-box;
                        //border: #1ab394 solid 1px;
                        font-size: 19px;
                        color: #23B9FF;
                        font-weight: bold;

                        span {
                            font-size: 14px;
                            color: #FFFFFF;
                            opacity: 0.5;
                        }

                        ::v-deep .el-divider--vertical {
                            width: 1.5%;
                            height: 60%;
                            color: #FFFFFF;
                            opacity: 0.5;
                        }

                    }
                }

            }

        }

        .chart {
            flex: 1;
            width: 100%;
            //height: 100%;
            overflow: hidden;
        }
    }

}
</style>
